<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>爱鲜蜂</title>
		<style type="text/css">
			body {
				font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif, "Microsoft Yahei", Simsun;
			}
			.mokuai{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			nav{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				justify-content: space-around;
				height: .6rem;
				line-height: .27rem;
				background: rgba(246,246,246,.95);
				text-align: center;
				z-index: 5;
			}
			/*给ul宽 要不子元素没效果*/
			nav ul{
				width: 100%;
			}

			.tabbar_ul li:nth-child(1){
				background-image: url(imgs/home2.png);
			}
			.tabbar_ul li:nth-child(2){
				background-image: url(imgs/sscs2.png);
			}
			.tabbar_ul li:nth-child(3){
				background-image: url(imgs/gwc2.png);
			}
			.tabbar_ul li:nth-child(4){
				background-image: url(imgs/mine2.png);
			}
			nav li{
				width: 25%;
				height: .54rem;
				font-size: .16rem;
				float: left;
				font-size: .12rem;
				color: #777;
				background-repeat: no-repeat;
				background-size: auto .24rem;
				background-position: center .072rem; 
				padding-top: .36rem;
				line-height: .19rem;
			}
			
			.tabbar_ul li:nth-child(1).active{
				background-image: url(imgs/home1.png);
			}
			.tabbar_ul li:nth-child(2).active{
				background-image: url(imgs/sscs1.png);
			}
			.tabbar_ul li:nth-child(3).active{
				background-image: url(imgs/gwc1.png);
			}
			.tabbar_ul li:nth-child(4).active{
				background-image: url(imgs/mine1.png);
			}

			@keyframes tabtardh{
				0%{
					background-size: auto .072rem;
				}

				20%{
					background-size: auto .264rem;
				}

				40%{
					background-size: auto .216rem;
				}

				60%{
					background-size: auto .2472rem;
				}

				80%{
					background-size: auto .2328rem;
				}

				100%{
					background-size: auto .24rem;
				}

			}
			nav li.active {
				-webkit-animation-duration: .75s;
				-webkit-animation-name: tabtardh;
			}
		</style>
		<link rel="stylesheet" href="libs/reset.css">
		<link rel="stylesheet" href="libs/swiper-3.4.2.min.css">
		<script type="text/javascript" src="libs/rem.js"></script>
		<script type="text/javascript" src="libs/angular.js"></script>
		<script type="text/javascript" src="libs/angular-ui-router.js"></script>
	</head>
	<body ng-app="App" ng-controller="indexCtrl">
		<nav class="tabbar" >
			<ul class="tabbar_ul">
	            <li ng-repeat = "btn in navBtns" ui-sref="{{ btn.sref }}" class="" ng-click="tabbardj(navBtns, $index)" ng-class="{'active':  btn.is_open == 0}">  	
	            	{{ btn.name }}
	            </li>
			</ul>
        </nav>
        <div ui-view class="mokuai"></div>
	</body>
	<script type="text/javascript" src = "index.js"></script>
	<script type="text/javascript" src = "zhuye/js/luobotu.js"></script>
	<script type="text/javascript" src = "libs/swiper-3.4.2.min.js"></script>
	<script type="text/javascript" src = "router.js"></script>
	<script type="text/javascript" src = "services.js"></script>
	<script type="text/javascript" src = "gongchanggongju.js"></script>
	<script type="text/javascript" src = "zhuye/js/zhuye.js"></script>
	<script type="text/javascript" src = "sscs/js/sscs.js"></script>
	<script type="text/javascript" src = "gouwuche/js/gouwuche.js"></script>
	<script type="text/javascript" src = "wode/js/wode.js"></script>
	<script type="text/javascript" src = "wode/js/dingdan.js"></script>
	<script type="text/javascript" src = "gonggong/js/xiangqing.js"></script>
</html>
